import { defineComponent, ref } from 'vue';
import useModule from './index.module';
import styles from './index.module.scss';

export default defineComponent({
  name: '',
  setup() {
    const carouselRef = ref(null);
    const {
      methods,
      carouselList
    } = useModule(carouselRef)
    return () => (
      <div class={styles.container}>
        <span onClick={() => methods.clickArrow('left')}>《 </span>
        <div class={styles.carouselWrapper} ref={carouselRef}>
          {
            carouselList.value.map((item, index) => {
              return <div
                key={item.id}
                class={styles.item}
                style={methods.computedStyle(index)}
              >
                <img src={item.url} style={{
                  width: '540px',
                  height: '360px'
                }} />
              </div>
            })
          }
        </div>
        <span onClick={() => methods.clickArrow('right')}> 》 </span>
    </div>
    )
  }
})
